import { withRouter } from "next/router";
import Link from "next/link";
import Router from "next/router";
import axios from "axios"


function Xiaojiejie({router,list}) {
    //监听，history 默认模式 ,hash模式, beforeHistoryChange在routeChangeCompete前面(history 模式下)
    Router.events.on('routeChangeStart',(...args)=>console.log("1 routerChangeStart->路由开始发生变化 参数为:", ...args))
    Router.events.on('routeChangeComplete',(...args)=>console.log("2 routeChangeComplete->路由变化结束 参数为:", ...args))
    Router.events.on('beforeHistoryChange',(...args)=>console.log("3 beforeHistoryChange->history模式下改变浏览器开始发生变化 参数为:", ...args))
    Router.events.on('routeChangeError',(...args)=>console.log("4 routeChangeError->跳转发生错误，处了404 参数为:", ...args))
    Router.events.on('hashChangeStart',(...args)=>console.log("5 hashChangeStart->hash模式路由发生变化开始， 参数为:", ...args))
    Router.events.on('hashChangeComplete',(...args)=>console.log("6 hashChangeComplete->hash模式路由发生变化结束， 参数为:", ...args))

    //钩子事件


    return(
        <>
            <div>{router.query.name}</div>
            <div>axios请求的数据{list}</div>
            <Link href="/router"><a>返回首页</a></Link>
        </>
    )
}

//远端请求数据
Xiaojiejie.getInitialProps = async ()=>{
   const promise =  axios.get('http://rap2api.taobao.org/app/mock/292931/index').then(res=>{
       return res.data
    })
    return await promise
}

export default withRouter(Xiaojiejie);